<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<title>事件分析</title>

<script type="text/javascript" src="../resources/js/contants.js"></script>
<link href="../resources/css/bootstrap.min.css" rel="stylesheet">
<link href="../resources/css/font-awesome.min.css" rel="stylesheet">
<link href="../resources/css/style.min.css" rel="stylesheet">
<link href="../resources/css/dateRange.css" rel="stylesheet">
<link href="../resources/css/bootstrap-select.min.css" rel="stylesheet">
<link rel="stylesheet" href="../resources/css/layer.css" id="layui_layer_skinlayercss" style="">
<link rel="stylesheet" href="../resources/css/layer.ext.css" id="layui_layer_skinlayercss" style="">
<link rel="stylesheet" href="../resources/css/style.css" id="layui_layer_skinlayercss" style="">
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-info">公用过滤条件</span>
                    </div>
                    <div class="ibox-content">
                        <span class="font-size-h1">事件category名称:
                            <select id="event_category_select">
                            </select>
                        </span>
                        <span class="no-margins">选择时间：</span>
                        <button id="time_show_bt" type="button" class="btn btn-default no-margins no-borders no-paddings" style="padding-bottom: 0px">
                            <span id="date1">默认</span>
                            <span class="caret"></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div id="demo" class="col-sm-12"></div>
        </div>
    </div>

    <script type="text/javascript" src="../resources/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="../resources/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../resources/js/dateRange.js"></script>
    <script type="text/javascript" src="../resources/js/bootstrap-select.min.js"></script>
    <!-- highcharts js -->
    <script type="text/javascript" src="../resources/js/highcharts.js"></script>
    <script type="text/javascript" src="../resources/js/funnel.js"></script>
    <script type="text/javascript" src="../resources/js/exporting.js"></script>
    <script type="text/javascript" src="../resources/js/json2.js"></script>
    <script type="text/javascript" src="../resources/js/common.js"></script>

    <script type="text/javascript">
    	var eventCategoryIdMap = {};
        var startDate = getStartDate();
        var endDate = getEndDate();

        $("#event_category_select").change(function(){
            var iv = $(this).val();
            if (iv != -1) {
            	categoryChangeEvent(iv);
            }
        });

        function categoryChangeEvent(category) {
            var sd = date2YmdStr(getYesterDay());
            var ed = sd;
            loadContent(getStartDate(), getEndDate(), category);
        };

        function loadContent(sd, ed, category) {
            var url = COMMON_PREFIX_URL + "/stats/summary/event?metric=times&platform=website";
            url += "&start_date=" + sd + "&end_date=" + ed;

        	var finalResult = {};
            var eventIds = eventCategoryIdMap[category];
            var index = 0;
            var eventIdSize = eventIds.length;
            var timess = [];

            for (var action in eventIds) {
            	$.ajax({
            		type : "get",
            		url : url + "&dimension_event_id=" + eventIds[action],
            		async : false,
            		success : function(data){
            			if (data.code == '200') {
            				var times = data.data[0]["$times"];
            				finalResult[action] = times;
            				timess.push(times);
            			}
            		}
            	});
            }

            var i = timess.length, j;
            var tempExchangVal;
            while (i > 0) {
                for (j = 0; j < i - 1; j++) {
                    if (timess[j] < timess[j + 1]) {
                        tempExchangVal = timess[j];
                        timess[j] = timess[j + 1];
                        timess[j + 1] = tempExchangVal;
                    }
                }
                i--;
            }

            var dataSeries = [];
            $(timess).each(function(i, item){
            	var ac = "";
            	for (var action in finalResult) {
            		if (finalResult[action] == item) {
            			ac = action;
            			break;
            		}
            	}
            	delete finalResult[ac];
            	dataSeries.push([ac, item])
            	//dataSeries.push({name:ac, y: item});
            });

            $('#demo').highcharts({
                chart: {
                    type: 'funnel',
                    marginRight: 100
                },
                title: {
                    text: category + '事件转换'
                },
                plotOptions: {
                    series: {
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b> ({point.y:,.0f})',
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
                            softConnector: true
                        },
                        neckWidth: '30%',
                        neckHeight: '25%'
                    }
                },
                legend: {
                    enabled: false
                },
                series: [{
                	name: category,
                    data: dataSeries
                }]
            });
        }

        $(document).ready(function(){
            // 加载event基本信息
            var url = COMMON_PREFIX_URL + "/stats/getDimensions?dimensions=event";
            $.get(url, {}, function(data){
                if (data.code == '200' && data.data != null && data.data["event"].length > 0) {
                    var str = '<option value="-1">请选择category名称</option>';
                    $.each(data.data["event"], function(i, item) {
                        var iid = item["id"];
                        var iv = item["category"];
                        var action = item["action"];
                        eventCategoryIdMap[iv] = eventCategoryIdMap[iv] ? eventCategoryIdMap[iv] : {};
                        eventCategoryIdMap[iv][action] = iid;
                        
                    });
                    for (var k in eventCategoryIdMap) {
                    	str += '<option value="' + k + '">' + k + '</option>';
                    }
                    $("#event_category_select").html(str);
                    $("#event_category_select").addClass("selectpicker");
                    $('.selectpicker').selectpicker();
                } else {
                }
            });

            // 显示时间控件
            new AE_Date('date1','time_show_bt',function(startDate, endDate){
            	var iv = $("#event_category_select").val();
                if (iv != -1) {
	                loadContent(startDate, endDate, iv);
                }
            }, startDate, endDate);
        });

    </script>
</body>
</html>